<template>
  <div class="exchange">
    <c-title :hide="false" text="兑换"></c-title>
    <div class="exchangeBox">
      <input type="text" v-model="keyword" class="inp" placeholder="请输入兑换码" />
      <div class="confirmBtn" @click="submit">兑换</div>
      <div class="record" @click="toRecord">兑换记录</div>
    </div>
    <div class="posImg" @click="toCouponNew">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/coupons_mycouponsbg@2x.png" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyword: ""
    };
  },
  methods: {
    async submit() {
      if (this.fun.isTextEmpty(this.keyword)) return this.$toast("请输入兑换码");
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.exchange.exchange", { code: this.keyword }, "");
      if (result) {
        this.$toast(msg);
        this.keyword = "";
      } else {
        this.$toast(msg);
      }
    },
    toCouponNew(){
      this.$router.push(this.fun.getUrl("new_coupon", {}));
    },
    toRecord() {
      this.$router.push(this.fun.getUrl("new_coupon_exchange_record", {}));
    }
  }
};
</script>
<style lang="scss" scoped>
.posImg {
  position: fixed;
  bottom: 5rem;
  right: -1.25rem;
  z-index: 999;
  img {
    width: 7.875rem;
    height: auto;
  }
}
.exchangeBox {
  margin: 0.63rem 0.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0 0.78rem;
  padding-top: 1rem;
  padding-bottom: 1.53rem;
  box-sizing: border-box;
  .inp {
    border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
    border: 0.03rem solid #d6d6dc;
    height: 2.5rem;
    width: 100%;
    padding-left: 0.66rem;
  }
  .confirmBtn {
    width: 20.44rem;
    height: 2.5rem;
    background: #f15353;
    border-radius: 1.5rem;
    text-align: center;
    line-height: 2.5rem;
    margin-top: 0.94rem;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.88rem;
  }
  .record {
    border-radius: 1.5rem;
    text-align: center;
    margin-top: 0.94rem;
    color: #f15353;
    font-weight: 500;
    font-size: 0.88rem;
  }
}
</style>
